<page-header></page-header>
<form nz-form [formGroup]="formGrop" >
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>Username</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
      <input nz-input formControlName="userName" placeholder="async validate try to write JasonWood" />
      <ng-template #userErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please input your username!
        </ng-container>
        <ng-container *ngIf="control.hasError('duplicated')">
          The username is redundant!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
      <input nz-input formControlName="email" placeholder="email" type="email" />
      <ng-template #emailErrorTpl let-control>
        <ng-container *ngIf="control.hasError('email')">
          The input is not valid E-mail!
        </ng-container>
        <ng-container *ngIf="control.hasError('required')">
          Please input your E-mail!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>Password</nz-form-label>
    <div>
      <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="Please input your password!">
        <input nz-input type="password" formControlName="password"  />
      </nz-form-control>
    </div>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>Confirm Password</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
      <input nz-input type="password" formControlName="confirm" placeholder="confirm your password" />
      <ng-template #passwordErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please confirm your password!
        </ng-container>
        <ng-container *ngIf="control.hasError('confirm')">
          Password is inconsistent!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>Comment</nz-form-label>
    <nz-form-control [nzSpan]="12" nzErrorTip="Please write something here!">
      <textarea formControlName="comment" nz-input rows="2" placeholder="write any thing"></textarea>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzOffset]="7" [nzSpan]="12">
      <button nz-button nzType="primary" >Submit</button>
      <button nz-button >Reset</button>
    </nz-form-control>
  </nz-form-item>
</form>
